<template>
	<div>
		<div>
			<image class="avatar" :src="me.icon" />
			<div class="userItem">
				<button class="userName">{{me.nickName}}</button>
				<view class="sign">{{me.introduce}}</view>
			</div>
			<div style="clear: both;"></div>
		</div>
		
		
		
		<div>
			<div class="self">
				<view class="itemNumber" @click="Dynamic()">
					<view style="font-weight: 700;">{{dynamic.length}}</view>
					<view>动态</view>
				</view>
				
				<view class="itemNumber" @click="Good()">
					<view style="font-weight: 700;">0</view>
					<view>我的商品</view>
				</view>
				
				<view class="itemNumber" @click="Fans()">
					<view style="font-weight: 700;">{{me.fans}}</view>
					<view>粉丝</view>
				</view>
				
				<view class="itemNumber" @click="Follow()">
					<view style="font-weight: 700;">{{me.followee}}</view>
					<view>关注</view>
				</view>
			</div>
			<div style="clear: both;"></div>
		</div>
		
		<view class="dynamic" v-for="dynamicItem in dynamic" v-if="dynamicShow">
			<image class="avatar" :src="dynamicItem.images" />
			<view class="dynamicTitle">{{dynamicItem.title}}</view>
			<view class="dynamicContent">{{dynamicItem.content}}</view>
			<view class="comments">{{dynamicItem.comments}}条评论</view>
		</view>
		
		<view class="fans" v-if="fansShow" v-for="fanitem in fans">
			<image :src="fanitem.icon" class="fansicon"></image>
			<view class="fanname">
				{{fanitem.nickName}}
			</view>
		</view>
		
		<view class="fans" v-if="followShow" v-for="fanitem in follow">
			<image :src="fanitem.icon" class="fansicon"></image>
			<view class="fanname">
				{{fanitem.nickName}}
			</view>
		</view>

		<view class="Item" v-for="itemData in mygoods">
			<image @click="ToGood(itemData.id)" class="itemImage" :src="itemData.images" ></image>
			<p class="itemContent">{{itemData.name}}</p>
			<p class="itemMoney">${{itemData.price}}</p>
		</view>

		<view style="height: 5vw;margin-top: 10vw;" ></view>
		<foot activeBtn = '4'></foot>
	</div>
</template>

<script>
	import foot from "../../component/foot.vue"
	var dynamicShow = true
	var goodsShow = false
	var fansShow = false
	var followShow = false

	var me = null
	var dynamic = null
	var fans = null
	var follow = null
	var mygoods = null
	
	export default{
		name: 'userPage',
		components:{
			'foot':foot	
		},
		data(){
			return{
				dynamicShow:dynamicShow,
				goodsShow:goodsShow,
				fansShow:fansShow,
				followShow:followShow,
				me:me,
				dynamic:dynamic,
				fans:fans,
				follow:follow,
				mygoods:mygoods
			}
		},
		onLoad:function(){
			this.me = getApp().globalData.me
			this.dynamic = getApp().globalData.dynamic
			this.fans = getApp().globalData.fans
			this.follow = getApp().globalData.following
			this.mygoods = getApp().globalData.mygoods
		},
		methods:{
			Dynamic(){
				this.dynamicShow = true
				this.fansShow = false
				this.followShow = false
				this.goodsShow = false
			},
			Good(){
				this.dynamicShow = false
				this.fansShow = false
				this.followShow = false
				this.goodsShow = true
			},
			Fans(){
				this.dynamicShow = false
				this.fansShow = true
				this.followShow = false
				this.goodsShow = false
			},
			Follow(){
				this.dynamicShow = false
				this.fansShow = false
				this.followShow = true
				this.goodsShow = false
			},
			ToGood(id){
				getApp().globalData.goodsId = id;
				uni.request({
					url: "http://" + getApp().globalData.IpAddr + "/goods/" + getApp().globalData.goodsId,
					method:"GET",
					header:{	'authorization':getApp().globalData.token	},
					success:res=> {
						getApp().globalData.NowGood = res.data.data
						console.log("NowGood   " + res.data.success)
						// console.log(res)
						uni.navigateTo({	url: "/pages/ext/commodity"	})
						}
				})
				
			}
		}
	}
</script>

<style>
	.avatar{
		width: 20vw;
		height: 20vw;
		margin-left: 8vw;
		margin-top: 2vw;
		float: left;
	}
	.userName{
		background-color: transparent;
		padding: 0px;
		width: min-content;
		height: min-content;
		font-size: 4vw;
	}
	.userName::after{
		border: none;
	}
	.sign{
		font-size: 10px;
	}
	.userItem{
		display: block;
		float: left;
		margin-left: 3vw;
		margin-top: 1vh;
	}
	.itemNumber{
		display: block;
		margin: 0 auto;
		width: 25vw;
		height: min-content;
		float: left;
	}
	.itemNumber view{
		display: block;
		margin: 0 auto;
		text-align: center;
	}
	.self{
		align-items: center;
		margin-top: 3vh;
	}
	.dynamic{
		margin-top: 5vw;
		padding-top: 1vw;
		height: 25vw;
	}
	.dynamicTitle{
		font-size: 20px;
		height: 10vw;
		margin-top: 3vw;
		margin-left: 30vw;
	}
	.comments{
		font-size: 2vw;
		float: right;
		margin-right: 5vw;
	}
	.fans{
		width: 100vw;
		padding: 5vw;
	}
	.fansicon{
		width: 15vw;
		height: 15vw;
		float: left;
	}
	.fanname{
		margin-top: 5vw;
		margin-left: 25vw;
	}
	.Item{
		width: 40vw;
		height: 50vw;
		padding: 5vw;
		float: left;
	}
	.itemImage{
		width: 100%;
		height: 40vw;
	}
	.itemContent{
		text-align: center;
		max-width: 45vw;
		-webkit-line-clamp: 2;
	}
	.itemMoney{
		text-align: left;
		margin-top: 3vw;
	}
</style>